<template>
  <table :style="{
        border:detail.style.outBorderWidth+'px ' +detail.style.outBorderStyle+' '+detail.style.outBorderColor}" class="custom-table">
    <tr v-for="index in detail.style.rowNum" :key="index">
      <td v-for="index in detail.style.columnNum" :key="index" :style="{
            borderTop:detail.style.innerBorderWidth+'px ' +detail.style.innerBorderStyle+' '+detail.style.innerBorderColor,
            borderRight:detail.style.innerBorderWidth+'px ' +detail.style.innerBorderStyle+' '+detail.style.innerBorderColor,
            borderBottom:detail.style.innerBorderWidth+'px ' +detail.style.innerBorderStyle+' '+detail.style.innerBorderColor}"
          class="custom-table-td"></td>
    </tr>
  </table>
</template>

<script>
import BaseView from './View';

export default {
  name: 'view-table',
  extends: BaseView,
  data() {
    return {}
  },
}
</script>

<style lang="scss" scoped>
.custom-table {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
}
</style>
